<template>
  <div>
    <div ref="divRef"></div>
    <Test ref="testRef" />
  </div>
</template>

<script setup lang="ts">
import Test from './Test.vue';
import { onMounted, ref } from 'vue';
import { unrefElement } from '@vueuse/core';

/**
 * unrefElement 可以直接取到ref对应的dom 注意：取的是根dom 即便是组件也是取的组件的根dom
 * https://vueuse.org/core/unrefElement/
 */

const divRef = ref();
const testRef = ref();
onMounted(() => {
  console.log(divRef.value);
  console.log(testRef.value);
  console.log(divRef.value, testRef.value.$el);

  console.log(1, unrefElement(divRef));
  console.log(2, unrefElement(testRef));
});
</script>

<style scoped></style>
